<template>
  <div>
    <!-- 头部容器 -->
    <header class="header-container">
      <!-- 搜索框 -->
      <van-search
        v-model="searchValue"
        @search="onSearch"
        show-action
        shape="round"
        clearable
        placeholder="请输入搜索关键词"
        maxlength="20"
      >
        <template #action>
          <div class="search-button" @click="onSearch">搜索</div>
        </template>
      </van-search>
    </header>
    <!-- 标签切换 -->
    <van-tabs
      v-model:active="active"
      sticky
      animated
      border
      line-width="1rem"
      title-active-color="#477fc6"
      ref="tabs"
      swipeable
      @click="firstLoad"
    >
      <van-tab v-for="(item, i) in type" :key="item" :title="item" :name="item">
        <slot name="default">
          <div style="min-height: calc(100vh - 100px)">
            <!-- 封装的列表组件 -->
            <find-list
              :findType="item"
              :ismine="false"
              :ref="(el) => (child[i] = el)"
              :style="active !== item ? 'height:calc(100vh - 100px);' : ''"
            />
          </div>
        </slot>
      </van-tab>
    </van-tabs>
    <!-- 发布按钮 -->
    <van-button
      v-if="!visitor"
      class="add-btn"
      icon="plus"
      type="primary"
      to="/publishWork"
    />
  </div>
</template>

<script>
import { reactive, toRefs, ref, watch, onMounted } from "vue";
import { Search, Tab, Tabs, Sticky, Button } from "vant";
import FindList from "@/components/FindModuleComponents/FindList.vue";
export default {
  name: "list",
  components: {
    [Search.name]: Search,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Sticky.name]: Sticky,
    [Button.name]: Button,
    FindList,
  },
  setup() {

    //懒加载数组：自动渲染第一个
    let load = ["文章", "视频"]

    const state = reactive({
      // 搜索框内容
      searchValue: "",
      // 激活的tab
      active: "推荐",
      // tab标签数组
      type: ["推荐", "文章", "视频"],
      // 是否搜索
      isSearch: false,
    });
    // 判断是否为正常用户
    const visitor = sessionStorage.getItem("visitor");
    // FindList组件
    let child = ref([]);
    // tabs组件用于窗口resize时重绘
    const tabs = ref(null);
    // 侦听搜索框，为空时将issearch置为false并重置左右发现内容
    watch(
      () => state.searchValue,
      (newVal, oldVal) => {
        if (state.isSearch && newVal === "") {
          child.value[0].setInit();
          child.value[1].setInit();
          child.value[2].setInit();
          state.isSearch = false;
        }
      }
    );
    // 搜索事件，为空时不搜索
    const onSearch = () => {
      if (state.searchValue === "") {
        return;
      }
      child.value[0].onSearch(state.searchValue);
      child.value[1].onSearch(state.searchValue);
      child.value[2].onSearch(state.searchValue);
      state.isSearch = true;
    };

    //懒加载的实现
    const firstLoad = (name) => {
       if(load.length == 0) return;
       if(name == "推荐") return
       let index = load.findIndex((value)=>value == name)    
       load.splice(index,1);
       if(name == "视频") index = 2;
       else index = 1;
       child.value[index].onRefresh()
    }

    return {
      ...toRefs(state),
      onSearch,
      child,
      tabs,
      visitor,
      firstLoad
    };
  },
};
</script>

<style lang="less" scoped>
// 头部标签
:deep(.van-tab) {
  font-weight: 500;
  border: 2px solid #fff;
}
:deep(.van-tabs__line) {
  background: #4389fc;
}
// 头部
.header-container {
  // 搜索按钮
  .search-button {
    color: #aaa;
    width: 40px;
    margin: 0 10px;
  }
}
// 发布按钮
.add-btn {
  position: fixed;
  right: 20px;
  bottom: 70px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: #1989fa 0 0 6px;
  :deep(.van-button__icon) {
    font-size: 24px;
  }
}
</style>
